<script setup lang="ts">
import { delay, rpx, rpxh } from "@/utils/myTools";
import { inject, onMounted, defineProps, toRaw, nextTick } from "vue";
import * as echarts from 'echarts';
const props:any = defineProps({
  da: {
    type: Array,
    default: '没有数据',

  },
  d: {
    type: Array,
    default: '没有数据',
  }
})
onMounted(async () => {
  await nextTick(); // 确保DOM元素已经渲染完成
  // echarts
  setTimeout(() => {
    let cishu: any = [];
    let dataone = () => {
      const da = new Array(props.da.length).fill(null).map((item, index) => {
        return props.da[index].次数;
      });
      return da;

    }
    cishu = dataone()
    // 日期
    let riqi: any = [];
    let datatwo = () => {
      const da = new Array(props.da.length).fill(null).map((item, index) => {
        if (props.da[index] && props.da[index].hasOwnProperty('日期')) {
          let date = props.da[index].日期;
          return date.slice(4, 6).replace(/\b(0+)/gi, "") + '.' + date.slice(6).replace(/\b(0+)/gi, "");
        } else {
          // 处理未定义的情况，例如返回空字符串或者null
          return '';
        }
      });
      return da;
    }
    riqi = datatwo()


    // 数量
    let shuliang: any = [];
    let sl = () => {
      const da = new Array(props.d.length).fill(null).map((item, index) => {
        return props.d[index].数量;
      });
      return da;

    }
    shuliang = sl()
    // 日期
    let slriqi: any = [];
    let dt = () => {
      console.log(new Array(props.da.length).fill(null));
      const da = new Array(props.da.length).fill(null).map((item, index) => {
        if (props.d[index] && props.d[index].hasOwnProperty('日期')) {

          let date = toRaw(props.d[index].日期);
        
          return date.slice(4, 6).replace(/\b(0+)/gi, "") + '.' + date.slice(6).replace(/\b(0+)/gi, "");
        } else {

          // 处理未定义的情况，例如返回空字符串或者null
          return '';
        }
      });
      return da;
    }
    slriqi = dt()
    const divone = {
      grid: {
        left: '0%',
        right: '5%',

        top: '5%',
        bottom: '5%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: riqi,
          axisTick: {
            show: false, // 不显示Y轴刻度
          },
        },
      ],
      yAxis: {
        axisTick: {
          show: false, // 不显示Y轴刻度
        },
        splitLine: {
          lineStyle: {//让y轴刻度为虚线
            type: 'dashed',
            color: '#ccc'
          },
          show: true
        },


      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',

          showSymbol: false, // 取消柱状条上面的小圆点
          // areaStyle: {
          //   type: 'linear', // 设置为线性渐变
          //   color: ['rgba(0, 0, 150, 0.3)', 'rgba(0, 255, 0, 0.6)'], // 设置渐变颜色范围
          // },
          data: cishu,
          areaStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 1,
              y2: 2,
              colorStops: [
                {
                  offset: 0,
                  color: '#B5961A', // 100% 处的颜色
                },
                {
                  offset: 0.5,
                  color: '#0C1938', // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: '#0C1938', //   0% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },

      ],
    }
    const divtwo = {
      grid: {
        left: '0%',
        right: '5%',
        top: '5%',
        bottom: '5%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: slriqi,
          axisTick: {
            show: false, // 不显示Y轴刻度
          },
        },
      ],
      yAxis: {
        axisTick: {
          show: false, // 不显示Y轴刻度
        },
        splitLine: {
          lineStyle: {//让y轴刻度为虚线
            type: 'dashed',
            color: '#ccc'
          },
          show: true
        },
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          showSymbol: false, // 取消柱状条上面的小圆点
          // areaStyle: {
          //   type: 'linear', // 设置为线性渐变
          //   color: ['rgba(0, 0, 150, 0.3)', 'rgba(0, 255, 0, 0.6)'], // 设置渐变颜色范围
          // },
          data: shuliang,
          areaStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 1,
              y2: 2,
              colorStops: [
                {
                  offset: 0,
                  color: '#00FFC4', // 100% 处的颜色
                },
                {
                  offset: 0.3,
                  color: '#061E3A', // 100% 处的颜色
                },
                {
                  offset: 0.4,
                  color: '#061E3A', // 100% 处的颜色
                },

                {
                  offset: 1,
                  color: '#061E3A', //   0% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    }
    var chartDom = document.getElementById('rightone');
    var myChart = echarts.init(chartDom);
    divone && myChart.setOption(divone);
    var chartDom = document.getElementById('righttwo');
    var myChart = echarts.init(chartDom);
    divtwo && myChart.setOption(divtwo);
  }, 1000);
})
</script>
<template>
  <div style="display: flex;" :style="{ height: rpxh(240),gap:rpx(18) }">
    <div>
      <div class="jccs"></div>
      <div id="rightone" :style="{ width: rpx(460), height: rpxh(186) }">
      </div>
    </div>
    <div>
      <div class="jcqs"></div>
      <div id="righttwo" :style="{ width: rpx(460), height: rpxh(186) }">

      </div>

    </div>
  </div>
</template>



<style scoped lang="scss">
@import "@/assets/main.scss";

.jccs {
  width: rpx(175);
  height: rpxh(50);
  background-image: url("@/assets/images/编组 38.png");
  background-size: 100% 60%;
  background-repeat: no-repeat;
}

.jcqs {
  width: rpx(175);
  height: rpxh(50);
  background-image: url("@/assets/images/编组 39.png");
  background-size: 100% 60%;
  background-repeat: no-repeat;
}
</style>